<template>
  <div class="container">
    <div v-if="pageStatus === LoadingStatus.LOADED">
      <div class="product-top">
        <div class="product-top-images">
          <ProductImagesComponent
            ref="productImagesComponentRef"
            :product-data="productData"
          />
        </div>
        <div class="product-top-info">
          <ProductInfoComponent
            :product-data="productData"
            @on-sku-image-click="onSkuImageChange"
          />
        </div>
      </div>
      <div class="product-bottom-detail">
        <ProductDetailComponent :product-data="productData" />
      </div>
    </div>
    <div v-else-if="pageStatus == LoadingStatus.LOADING">
      <ProductSkeleton></ProductSkeleton>
    </div>
    <div v-else-if="pageStatus == LoadingStatus.ERROR">
      <ProductErrorPageComponent></ProductErrorPageComponent>
    </div>

    <el-backtop target=".el-main" :right="80" :bottom="80" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElCarousel, ElCarouselItem } from 'element-plus'
import ProductImagesComponent from './components/ProductImagesComponent.vue'
import ProductInfoComponent from './components/ProductInfoComponent.vue'
import ProductDetailComponent from './components/ProductDetailComponent.vue'
import ProductSkeleton from './components/ProductSkeleton.vue'
import ProductErrorPageComponent from './components/ProductErrorPageComponent.vue'
import { getProductDetail } from '@/api/product'
import { useRoute } from 'vue-router'

// eslint-disable-next-line no-unused-vars
enum LoadingStatus {
  // eslint-disable-next-line no-unused-vars
  LOADING = 'loading',
  // eslint-disable-next-line no-unused-vars
  LOADED = 'loaded',
  // eslint-disable-next-line no-unused-vars
  ERROR = 'error'
}

const productData = ref(null)

defineOptions({
  name: 'ProductDetail',
  components: {
    ElCarousel,
    ElCarouselItem
  }
})

const productId = useRoute().query.id

const pageStatus = ref(LoadingStatus.LOADING)

const productImagesComponentRef = ref()

onMounted(async () => {
  getProductDetail({
    offerId: productId,
    country: 'en'
  })
    .then((res: any) => {
      if (res.success) {
        productData.value = res.data
        pageStatus.value = LoadingStatus.LOADED
      } else {
        pageStatus.value = LoadingStatus.ERROR
      }
    })
    .catch(() => {
      pageStatus.value = LoadingStatus.ERROR
    })
})

const onSkuImageChange = (imgUrl: string) => {
  productImagesComponentRef.value.resetIndicatorPosition(imgUrl)
}
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 13px auto 0;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  position: relative;
}

.product-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #f9fafb;
  border-radius: 10px;
}

.product-top-images {
  margin: 50px 34px 13px 40px;
}

.product-top-info {
  margin-top: 50px;
  margin-right: 50px;
}

.product-bottom-detail {
  margin-top: 27px;
  background-color: #f9fafb;
  border-radius: 10px;
  margin-bottom: 100px;
}

:deep(.el-backtop__icon) {
  color: #fa4756;
}
</style>
